<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <style>
        #page-wrapper h1 {
            display: block;
            margin-bottom: 20px;
            border-bottom: 1px solid #999;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }

        select.year, select.mouth {
            width: 100px;
        }

        #btn {
            display: inline-block;
            background-color: #ffbe34;
            line-height: 35px;
            padding: 0 15px;
            font-size: 14px;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        #depart-box {
            display: block;
            padding: 20px;
        }

        #depart-box label {
            display: inline-block;
            margin: 20px 20px 0;
        }

        #depart-box .bot {
            display: block;
            padding-top: 50px;
            text-align: center;
        }

        .form-control {
            border: none;
            box-shadow: none;
            margin-top: 3px;
            background-color: transparent;
        }

        .img-box {
            display: block;
            margin: 10px 5% 0 10%;
            padding: 10px;
        }

        .img-box img {
            border: 1px solid #ccc;
            margin: 0 5px;
            max-height: 100px;
        }

        .total-price {
            color: #ffbe34;
            font-size: 24px;
        }

        .mes-box {
            display: block;
            margin-left: 10%;
            overflow: hidden;
        }

        .mes-tit {
            display: block;
            padding: 0 20px;
            line-height: 40px;
            background-color: #eee;
            border-top: 1px solid #ccc;
            overflow: hidden;
        }

        .mes-tit .name {
             float: left;
             width: 35%;
         }

        .mes-tit .contract {
            float: left;
            width: 35%;
        }

        .mes-tit .number {
            float: left;
        }

        .mes-tit .price {
            float: right;
        }

        .mes-li .box {
            float: left;
            width: 35%;
        }

        .mes-li .contract {
            float: left;
            width: 35%;
        }

        .mes-li .number {
            float: left;
        }

        .mes-li .price {
            float: right;
        }

        .mes-box ul {
            display: block;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .mes-box li {
            display: block;
            padding: 20px;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
        }

        .mes-box li .box {
            float: left;
            width: 35%;
        }

        .mes-box li .box img {
            float: left;
            margin-right: 10px;
            border: 1px solid #ccc;
        }

        .box .tit {
            display: inline-block;
        }

        #offline-pay {
            display: inline-block;
            padding: 0 10px;
            line-height: 35px;
            background-color: #ffbe34;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }

        .bot-span {
            text-align: right;
        }

        .remark-con {
            display: block;
            border: 1px solid #ccc;
            padding: 10px 20px;
            line-height: 200%;
            min-height: 75px;
        }

        .user-name {
            padding-left: 30px;
        }

        .order-image {
            margin: 0;
        }
    </style>
</head>
<body>

<div id="page-wrapper">
    <div class="panel panel-f5">
        <div class="panel-body row">
            <div class="form-horizontal">
                <h1>● 订单状态</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">当前订单状态：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-if="orderObj.status==1">待支付</span>
                        <span class="form-control" v-if="orderObj.status==2">已完结</span>
                        <span class="form-control" v-if="orderObj.status==3">已关闭</span>
                    </div>
                </div>

                <h1>● 订单信息</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">订单编号：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="orderId"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">下单人：</span>
                        <span class="form-control" v-text="orderObj.name"></span>
                    </div>
                </div>
                <h1 style="border:1px dashed #ccc"></h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">手机号：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="orderObj.phone"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">下单时间：</span>
                        <span class="form-control" v-text="orderObj.createTime"></span>
                    </div>
                </div>
                <h1 style="border:1px dashed #ccc"></h1>

                <h1>● 商家信息</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">商家名称：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="orderObj.shopName"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">手机号：</span>
                        <span class="form-control" v-text="orderObj.shopPhone"></span>
                    </div>
                </div>
                <h1 style="border:1px dashed #ccc"></h1>

                <h1>● 商品信息</h1>
                <div class="form-group">
                    <div class="col-sm-10 col-xs-10 mes-box">
                        <div class="mes-tit">
                            <span class="name">产品名称</span>
                            <span class="contract">商品类型</span>
                            <span class="number">数量</span>
                            <span class="price">单价</span>
                        </div>
                        <ul>
                            <li class="mes-li">
                                <div class="box">
                                    <img :src="orderObj.productUrl" width="100">{{orderObj.productName}}
                                </div>
                                <div class="contract">其它</div>
                                <div class="number" v-text="orderObj.count"></div>
                                <div class="price">￥{{orderObj.productPrice}}</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <h1>● 费用信息</h1>
                <div class="form-group">
                    <div class="form-group" v-if="orderObj.status==1 || orderObj.status==3">
                        <span class="control-label detail-span col-sm-11 col-xs-11 bot-span">应付金额：<b class="total-price" >￥{{orderObj.moneyCount}}</b></span>
                    </div>
                    <div class="form-group" v-if="orderObj.status==2">
                        <span class="control-label detail-span col-sm-11 col-xs-11 bot-span">已付金额：<b class="total-price" >￥{{orderObj.moneyCount}}</b></span>
                    </div>
                </div>
                <h1 style="border:1px dashed #ccc"></h1>
            </div>
        </div>
    </div>
</div>

<script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/campsite.js" type="text/javascript"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#page-wrapper",
        data: {
            dataObj: {},
            orderObj: {},
            protoObj: {}
        },
        methods: {},
        created: function () {
            var _this = this;
            var cur = window.location.href.split("&");
            cur = cur[cur.length - 1];
            var id = cur.split("=")[1];
            $.ajax({
                url: '${basePath}/admin/agent/order/queryOrderById',
                type: 'GET',
                dataType: 'json',
                data: {
                    orderId: id
                },
                success: function (data) {
                    console.log(data.result)
                    _this.orderId = id;
                    _this.dataObj = data.result;
                    _this.orderObj = data.result.agentOrderInfoDto;
                    _this.protoObj = data.result.agentProtocolDto;
                },
                error: function () {
                    console.log("error")
                }
            })
        }
    })

    //新增上传框
    $('.add-inputfile5').on('click', function () {
        addImg('policy', this);
    });

    function addImg(name1, obj) {
        var str1 = "<div class='inputfile-img-box'><input class='obj-input' name=" + name1 + " value='' type='hidden'>" +
                "<img class='obj-img' src='' style='display:none' width='100' height='100'><span class='input-file'>" +
                "<input data-image=" + name1 + " data-action='goods' type='file' onchange='uploadImg(this)'></span><i class='fa fa-close'></i></div>";
        var len = $(obj).parent().find(".inputfile-img-box").length;
        if (len < 2) {
            $(obj).before(str1);
        }
        else {
            return false
        }
        $("i.fa-close").click(function () {
            $(this).parent().remove();
        });
    }

    function addSer(obj) {
    <#--layer.open({-->
    <#--type: 2,-->
    <#--area: ['600px','500px'],-->
    <#--title: ['','text-align:center;font-weight:bold;background:#fff;'],-->
    <#--content: ['${basePath}/admin/series/create?shopId='+'${shopId!}'+'&revet=third','no'],-->
    <#--success: function (layero, index) {-->
    <#--//layer.iframeAuto(index)//高度自适应-->
    <#--},-->
    <#--end:function(){-->
    <#--window.location.reload()-->
    <#--}-->
    <#--});-->
        var _this = "<img src='" + $(obj).attr("data-name") + "' style='max-height: 450px;'>";
        layer.open({
            type: 1,
            area: ['auto', 'auto'],
            title: false,
            content: _this,
            end: function () {
                layer.closeAll()
            }
        });
    }

    function goBack() {
        window.location.href = "${basePath}/orderPackage/list";
    }

    $(function () {
    <#--var imgArr = ${orderProductDto.credentialsUrl};-->
    <#--var temp = "";-->
    <#--for(var i= 0,len=imgArr.length;i<len;i++){-->
    <#--temp += '<img src="'+imgArr[i]+'" height="100">';-->
    <#--$("#credentialsUrl").append(temp);-->
    <#--}-->

        $(".img-box img").each(function () {
            $(this).click(function () {
                var _this = "<img src='" + $(this).attr("src") + "' style='max-height: 450px;'>";
                layer.open({
                    type: 1,
                    area: ['auto', 'auto'],
                    title: false,
                    content: _this,
                    end: function () {
                        layer.closeAll()
                    }
                });
            })
        })

    <#--$("#offline-pay").click(function(){-->
    <#--//请求数据成功后 => 弹窗-->
    <#--//$.ajax();-->
    <#--layer.open({-->
    <#--type: 2,-->
    <#--area: ['700px','400px'],-->
    <#--title: ['确认订单款项','font-weight:bold;background:#fff;'],-->
    <#--content: ['${basePath}/admin/order/product/offline/' + ${orderProductDto.orderId},'yes'],-->
    <#--end: function () {-->
    <#--layer.closeAll()-->
    <#--}-->
    <#--});-->
    <#--})-->
    });
</script>
</body>
</html>
